<template>
  <div class="body">
    <!-- 顶部 -->
    <nav class="nav">
      <span class="back" @click="$router.go(-1)">&lt;</span> 城市列表
    </nav>

    <!-- 热门和当前城市 -->
    <van-index-bar :sticky="false" highlight-color="#21b97a">
      <van-index-anchor>当前城市</van-index-anchor>
      <p>{{ nowCity }}</p>
      <van-index-anchor>热门城市</van-index-anchor>
      <van-cell
        :title="item.label"
        v-for="item in hot"
        :key="item.label"
        @click="chooseCity(item.label)"
      />
    </van-index-bar>

    <!-- A～Z -->
    <van-index-bar
      class="indexBar"
      :sticky="false"
      highlight-color="#fb6463"
    >
      <van-index-anchor
        v-for="(item, index) in firstName"
        :key="index"
        :index="index"
      >
        <span class="indexWord">{{ index }}</span>
        <van-cell
          @click="chooseCity(citem)"
          v-for="(citem, cindex) in item"
          :key="cindex"
          :title="citem"
        />
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>

<script>
import { getCity, hotCity } from '@/api/area'
// import pinyin from 'js-pinyin'
export default {
  name: 'houseList',
  data () {
    return {
      indexList: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'M',
        'N',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'W',
        'X',
        'Y',
        'Z'
      ],
      firstName: null,
      hot: ''
    }
  },

  async created () {
    const { body } = await getCity('1')
    // console.log(body)

    let cityNameList = []
    // let firstName = {}
    for (let p in body) {
      cityNameList.push(body[p].label)
    }

    let pinyin = require('js-pinyin')
    pinyin.setOptions({ checkPolyphone: false, charCase: 0 })

    this.firstName = {}

    this.indexList.forEach(item => {
      this.firstName[item] = []
      cityNameList.forEach(el => {
        let first = pinyin.getFullChars(el).substring(0, 1)

        if (first === item) {
          this.firstName[item].push(el)
        }
      })
    })
    console.log(this.firstName)
    const res = await hotCity()
    console.log(res.body)
    this.hot = res.body
  },
  // '/findhouse',name
  methods: {
    chooseCity (citem) {
      console.log(citem)
      // this.correntCity = citem

      if (
        citem === '北京' ||
        citem === '上海' ||
        citem === '广州' ||
        citem === '深圳'
      ) {
        localStorage.setItem('myCity', citem)
        this.$router.go(-1)
      } else {
        this.$toast('该城市暂无房源')
      }
    }
  },
  computed: {
    nowCity () {
      return localStorage.getItem('myCity')
    }
  }
}
</script>

<style scoped lang="less">
.nav {
  height: 44px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 44px;
  text-align: center;
  background: #4fc08d;
  color: #fff;
  .back {
    font-size: 18px;
    color: #fff;
    position: absolute;
    left: 10px;
    top: 0;
    transform: scale(1, 1.5);
  }
}
.text {
  // font-size: 16px;
  color: #b7b5b5;
  margin: 90px;
}
.indexBar {
    color: #999999;

  //  line-height: 1.15;
  font-family: 'Microsoft YaHei';
}
.indexWord {
  font-family: 'Microsoft YaHei';
  color: #999999;
}
</style>
